﻿<!doctype html>
<html>
<head>
  <title>起步</title>
</head>
<body>
测试
<div id="app">
</div>


<script type="module" >

  import MVVM from './libs/mvvm.js'

  let html = `
<div class="c-row search-line {{name}} {{age}}" ontap="onclick"
style="font-size: 14px; margin-left: {{age + 'px'}}; margin-top: {{age + 'px'}} " data-name="{{name}}" data-flag="start" >
  <div class="c-span9 js-start search-line-txt" >
    {{name}}</div>
    <span>{{age+1}}</span>
    <input type="text" value="{{age}}">
     <br>
</div>
  `
//  html = `
//<div class="c-row search-line {{name}} {{age}}" ontap="onclick"
//style="font-size: 14px; margin-left: {{age + 'px'}}; margin-top: {{age + 'px'}} " data-name="{{name}}" data-flag="start" >
//</div>
//  `
html = `
  <div ontap="onclick">
    <my-component name="{{name}}"></my-component>
    <div m-for="(val, key, index) in arr">索引 {{key + 1}} ：{{val}}</div>
  </div>
  `
let vm = new MVVM({
  el: '#app',
  template: html,
  components: {
    'my-component': {
      props: ['name'],
      template: '<div>{{name}}-children component!</div>'
    }
  },
  data: {
    name: '叶小钗',
    age: 30,
    arr: [
      '叶小钗', '素还真', '一页书'
    ]
  },
  methods: {
    onclick: function(e) {
      this.setData({
        name: '素还真',
        age: this.age + 1
      });
    }
  }
})

  window.vm = vm;

</script>
</body>
</html>